<template>
    <div>
        <navigateBar/>
        <div id="homeMain" @mouseleave="(activeNum = 0)">
          <!-- 侧边菜单栏、轮播图 -->
          <div @mouseleave="(activeNum = 0)">
            <el-row>
              <el-col :span="4">
                <div class="sideMenu">
                  <div v-for="item in menuItem" :data="menuItem" :key="item.key" :class="activeNum ===item.key ? 'menuItem_active' : 'menuItem'" >
                    <div style="text-align: start;padding: 0 10px;" @mouseenter="setActiveNum(item.key)" >
                      {{item.label}}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="16">
                <!-- 用户未选择某分类，出现轮播图 -->
                <div id="home_carousel" v-if="(activeNum == 0)">
                  <el-carousel height="25.5rem">
                    <el-carousel-item v-for="item in bannerList" :key="item.key" :data="bannerList" style="​​display: table-cell">
                      <img :src="item.url" alt="banner" style="height:420px; background-position:center;">
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <!-- 用户选择某分类后，出现该分类类别模块 -->
                <div v-else style="width:300px">
                  <div class="selectedMk">
                    <div v-for="item in detailMenuList" :key="item.index" :data="detailMenuList">
                      <div v-if="(activeNum == item.label)">
                          <div v-for="detail in item.detail" :key="detail.index" :data="item.detail"> 
                            <br>
                              <div style="float: left;margin-bottom: 10px;">
                                <div>
                                    <div class="fiestItem">{{detail[0]}}</div>
                                </div>
                                <div style="margin: -20px 0 0 100px;width: 700px;">
                                  <div v-for="(detailItetm, index) in detail" :key="detailItetm.index" :data="detail" >
                                    <div v-if="(index !== 0)" class="elseItem">{{detailItetm}}&emsp;</div>
                                  </div>
                                  <div style="width: 700px;border-bottom: 1px rgb(0,0,0,.4) dashed;float: left;margin-top: -5px;"></div>
                                </div> 
                              </div>
                          </div> 
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div  v-if="(activeNum == 0)">
                  <div v-for="item in rightPic" :key="item.index" :data="rightPic"> 
                    <div class="rightPicMb" v-show="(item.className == rightPicMbNum)">
                      <PRE style="margin-top:40px;line-height: 30px;">
                        {{item.discribe}}
                      </PRE>
                    </div>
                    <img :src="item.url" alt="banner" style="width:90%; height: 130px; margin:  0 0 0 0px;margin-bottom: 5px;">
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 简介信息 -->
          <div style="overflow:hidden">
            <div style="height:10px"></div>
            <el-row>
              <!-- 左部操作栏 -->
              <el-col :span="6" >
                <div id="infobox1">
                  <img src="../../assets/pic/home/toTop.png" style="position:absolute;width:260px;
                  opacity: .2;z-index: -1;margin-left: 5px;">
                    <div style="height: 140px;background-color: rgb(53,104,82,.5);width: 280px;">
                      <div v-for="item in iconList" :key="item.index" :data="iconList" style="float:left;margin: 11px 0 0 15px">
                        <div style="width:70px;text-align:center;color:rgb(255,255,255,.7);font-size: 13px;cursor: pointer;">
                           <img :src="item.url" :alt="item.info">
                          <div>{{item.info}}</div>
                        </div>
                      </div>
                    </div>
                </div>
              </el-col>
              <!-- 右部消息列表 -->
              <el-col :span="18">
                <div id="infobox2">
                  <div style="margin: 5px 0 5px 10px;position: absolute;color: #AED581;">逸 物<span style="color: "> 热 </span>榜</div>
                  <el-row >
                    <el-col :span="11">
                      <div style="margin:30px 0 0 10px">
                        <div v-for="item in infoList" :key="item.index" :data="infoList" style="margin: 0 0 6px 0">
                          <span style="color:#FF8A65;border: #FF8A65 1px solid;border-radius: 5px;font-size:14px;">
                            &nbsp;{{item.lable}}&nbsp;
                          </span>
                          <span style="color:rgb(255,255,255,.6)">
                            &nbsp;{{item.info}}
                          </span>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="1">
                      <div style="width:10px;height:105px;border-right: 2px rgb(0,0,0,.3) dashed;margin-top: 26px;"></div>
                    </el-col>
                    <el-col :span="12">
                      <div style="margin:30px 0 0 10px">
                        <div v-for="item in infoList_1" :key="item.index" :data="infoList" style="margin: 0 0 6px 0">
                          <span style="color:#FF8A65;border: #FF8A65 1px solid;border-radius: 5px;font-size:14px;">
                            &nbsp;{{item.lable}}&nbsp;
                          </span>
                          <span style="color:rgb(255,255,255,.6)">
                            &nbsp;{{item.info}}
                          </span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <div style="margin: -130px 0 0 0;right:30px;position: absolute;color: rgb(255,255,255,.7);font-size: 13px;">
                    查看更多<i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 逸物精选 -->
          <div id="jinxuan">
            <h1 class="labelTitle"> - 逸物精选 - </h1>
            <div style="overflow:hidden">
              <el-row>
                <el-col :span="8">
                  <div style="height:500px;width: 350px;background-color:aliceblue" class="jingxuan">
                      <img src="https://gd-hbimg.huaban.com/59e774ecc9e8a7f5d4cb235c26b6210d1643fb7c133ac9-HhC5zQ_fw1200"
                      style="height:500px;width: 350px;" alt="">
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="height:500px;width: 350px;background-color:aliceblue" class="jingxuan">
                    <img src="https://gd-hbimg.huaban.com/f44bc9054c696cdebea33b253471d5aad3354db475ade-qOm6NN_fw1200"
                      style="height:500px;width: 350px;" alt="">
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="height:240px;width: 350px;background-color:aliceblue;overflow: hidden;" class="jingxuan">
                    <img src="https://gd-hbimg.huaban.com/106a3d019e248f97c97578f86936066021972581136e9-9JZgRU_fw1200"
                      style="width: 350px;" alt="">
                  </div>
                  <div style="height:240px;width: 350px;background-color:aliceblue;margin-top: 20px;overflow: hidden;" class="jingxuan">
                    <img src="https://gd-hbimg.huaban.com/50b2ec0289b3f8d4b4dab0dab10cc0cc51dfd99624ace-4MAVKC"
                      style="width: 350px;" alt="">
                  </div>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="8">
                  <div style="height:240px;width: 350px;background-color:aliceblue;margin-top: 20px;overflow: hidden;" class="jingxuan">
                    <img src="https://gd-hbimg.huaban.com/1eafcc75bad1292ccb18227bf549c3060430f51d34289-dmw192_fw1200"
                      style="width: 350px;" alt="">
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="height:240px;width: 350px;background-color:aliceblue;margin-top: 20px;overflow: hidden;" class="jingxuan">
                    <img src="https://gd-hbimg.huaban.com/3aaa1be4112ea97d0f9d2df034227ff430b0343f3b69c-rqIt4X_fw1200"
                      style="width: 350px;" alt="">
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="height:240px;width: 350px;background-color:aliceblue;margin-top: 20px;overflow: hidden;" class="jingxuan">
                    <img src="https://gd-hbimg.huaban.com/dae014a24ab939d7bffbfa41f721a21bfb8617178c510-KnlNta_fw658"
                      style="width: 350px;" alt="">
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 逸物分区 -->
          <div  id="fenqu">
            <h1 class="labelTitle"> - 逸物分区 - </h1>
            <div v-if="(isLogin==1)">
              <div v-for="item in menuItem" :key="item.index" :data="menuItem">
                  <h4>{{item.label}}</h4>
                  <el-row>
                    <el-col :span="4">
                     <img src="http://t13.baidu.com/it/u=393560877,1619652213&fm=224&app=112&f=JPEG?w=500&h=500" style="width:170px;height:170px">
                    </el-col>
                    <el-col :span="4">
                    <img src="http://t13.baidu.com/it/u=2773544325,2137473154&fm=224&app=112&f=JPEG?w=500&h=500" style="width:170px;height:170px">
                    </el-col>
                    <el-col :span="4">
                    <img src="https://img0.baidu.com/it/u=2778824381,1802999950&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" style="width:170px;height:170px">
                    </el-col>
                    <el-col :span="4">
                     <img src="https://img1.baidu.com/it/u=849652217,3806038837&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" style="width:170px;height:170px">
                    </el-col>
                    <el-col :span="4">
                      <img src="https://img0.baidu.com/it/u=937064726,3656863955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" style="width:170px;height:170px">
                    </el-col>
                    <el-col :span="4">
                      <img src="https://img0.baidu.com/it/u=937064726,3656863955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" style="width:170px;height:170px">
                    </el-col>
                  </el-row>
              </div>
            </div>
            <div  v-if="(isLogin==0)" style="height:400px;color:white;font-size:60px;text-align:center;
            background-color: rgb(255,255,255,.6);">  
              <br> <br>下面的内容请登录后再查看
            </div>
          </div>
          <!-- 优惠大厅 -->
          <div id="youhui"  v-if="(isLogin==1)" >
            <h1 class="labelTitle"> - 优惠大厅 - </h1>
          </div>
        </div>
        <!-- 回到顶部按钮 -->
        <div @click="toTop()" class="toTop" v-show="(scrollHeight>400)">
            <img src="../../assets/pic/home/toTop.png" alt="回到顶部" style="width:70px">
            <div style="margin: -7px 0 0 5px;color:rgb(236,219,186)">回到顶部</div>
        </div>
    </div>
</template>
<script>
import navigateBar from '../../components/navigateBar'
export default {
  name: 'homePage',
  components : {
    navigateBar,
  },
  data(){
    return{
      isLogin:0,
      activeNum:0,
      rightPicMbNum:1,
      showToTop: false,
      scrollHeight: 0,
      bannerList:[
        {url: require(`../../assets/pic/home/banner1.jpg`) ,key:1 },
        {url: require(`../../assets/pic/home/banner2.png`) ,key:2 },
        {url: require(`../../assets/pic/home/banner3.png`) ,key:3 },
      ],
      menuItem:[
        {label:'男装 / 女装 / 鞋帽',key:1},
        {label:'手机 / 数码',key:2},
        {label:'日用百货 / 食物特产',key:3},
        {label:'美妆 / 个护',key:4},
        {label:'家装家居 / 五金 / 厨具',key:5},
        {label:'办公用品 / 文具',key:6},
        {label:'母婴用品 / 童装',key:7},
        {label:'电脑设备 / 数码',key:8},
        {label:'宠物用品',key:9},
        {label:'电器产品 / 配件',key:10},
        {label:'图书 / 影像 / 电子书',key:11},
        {label:'玩具 / 乐器',key:12},
        {label:'珠宝 / 配饰 / 箱包',key:13},
        {label:'运动户外 / 体健用品',key:14},
        {label:'明星周边 / 海外购',key:15},
      ],
      rightPic:[
      { url: 'https://gd-hbimg.huaban.com/e843e0da76ca118e2138c215809c5b2871acbd3e1a83fe-3GReu1_fw1200',
        className:1,
        discribe:'双12狂欢回收节\n   快来“变废为宝”'
      },
      { url: require(`../../assets/pic/home/rightPic2.png`) ,
        className:2,
        discribe:'冬 季 上 新\n  低 至 八 折'
      },
      { url: require(`../../assets/pic/home/rightPic3.png`) ,
        className:3,
        discribe:'和 逸 物 一 起\n  向 新 年 许 愿'
      },
      ],
      detailMenuList:[
        {
          label:'1',
          detail:
          {
              '女装':['女装','时尚套装','连衣裙','半身裙','衬衫','卫衣','西装','风衣','针织衫','雪纺衫','毛呢大衣','羽绒服'
              ,'礼服','毛呢','羽绒服','毛呢大衣','羽绒服'],
              '男装':['男装','连衣裙']
          },
        },
        {
          label:'2',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'3',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'4',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'5',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'6',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'7',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'8',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'9',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'10',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'11',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'12',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'13',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'14',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
        {
          label:'15',
          detail:
          {
              '美妆':['时尚套装','连衣裙'],
              '房产':['时尚套装','连衣裙']
          }
        },
      ],
      iconList:[
        {
          url:require(`../../assets/pic/home/icons/haowu.png`),
          info:'好物评测'
        },
        {
          url:require(`../../assets/pic/home/icons/jingxuan.png`),
          info:'逸物精选'
        },
        {
          url:require(`../../assets/pic/home/icons/kefu.png`),
          info:'客服中心'
        },
        {
          url:require(`../../assets/pic/home/icons/vipfuwu.png`),
          info:'会员服务'
        },
        {
          url:require(`../../assets/pic/home/icons/vipquanyi.png`),
          info:'会员权益'
        },
        {
          url:require(`../../assets/pic/home/icons/vipzhongxin.png`),
          info:'会员中心'
        },
      ],
      infoList:[
        {
          lable:'HOT',
          info:'尼康D850全画幅数码微单单反相机'
        },
        {
          lable:'热议',
          info:'小熊豆浆机家用全自动免煮多功能'
        },
        {
          lable:'热搜',
          info:'三体套装全册地球往事刘慈欣'
        },
        {
          lable:'最新',
          info:'高等数学第七版同济大学7版 上下册'
        },
      ],
      infoList_1:[
        {
          lable:'HOT',
          info:'原装适用vivo充电器闪充数据线插头'
        },
        {
          lable:'热议',
          info:'欧舒丹护手霜套装 30ml*4'
        },
        {
          lable:'热搜',
          info:'南极人 2022年冬季羽绒服男'
        },
        {
          lable:'最新',
          info:'二手 考研英语词汇红宝书'
        },
      ]
    }
  },
  methods:{
    setActiveNum(id){
      this.activeNum = id;
    },
    getLoginState(){
      let user = localStorage.getItem("user");
      console.log('user',user)
      if(user !== null){
        this.isLogin = 1
      }
    },
    setRightPic(){
      setInterval(() => {
        this.rightPicMbNum+=1;
        if(this.rightPicMbNum==4){
          this.rightPicMbNum = 1;
        }
      }, 4500)
    },
    handleScroll () {
      // var sortMenu = document.body.scrollTop;
      var scrollTop = document.documentElement.scrollTop;
      this.scrollHeight = scrollTop;
      // console.log('滚动条高度',this.scrollHeight);
    },
    toTop(){
      const timeTop = setInterval(() => {
        document.documentElement.scrollTop = this.scrollHeight -= 50;  
        if (this.scrollHeight <= 0) {
          clearInterval(timeTop); //清除定时器
        }
      }, 10);
    }
  },
  mounted(){
    this.setRightPic(),
    window.addEventListener('scroll', this.handleScroll),
    this.getLoginState()
  },
  destroyed() {
    clearInterval(this.setRightPic());
  }
}
</script>
<style>
#home_carousel{
  background-color:cadetblue;
  max-width: 800px;
  margin: 0 10px;
}
#homeMain{
  width: 75%;
  /* background-color: rgb(103, 141, 125); */
  /* background-color: rgb(53,104,82); */
  margin: 20px auto;
}
.sideMenu{
  /* background-color: rgb(73, 109, 94); */
  background-color: rgb(53,104,82);
  /* width: 185px; */
  line-height: 20px;
  padding: 10px 0;
}
.menuItem{
  color: rgb(236,219,186,.7);
  height: 26px;
  width: 100%;
  font-size: 15px;
  cursor: pointer;
}
.menuItem_active{
  color: rgb(53,104,82);
  height: 26px;
  font-weight: 600;
  width: 100%;
  background-color: rgb(236,219,186);
  cursor: pointer;
}
.rightPicMb{
  margin: 0 0 0 0px;
  position: absolute;
  background-color: rgb(103, 141, 125,.8);
  width: 172px;
  height: 130px;
  font-size: 15px;
  font-weight: 600;
  color: rgb(236,219,186);
  text-align: center;
  animation: showMb .7s;
}
@keyframes showMb {
  from{
    opacity: 0
  }
  to{
    opacity: 1
  }
}
.toTop{
  position: sticky;
  bottom: 70px;
  float: right;
  right: 100px;
  cursor: pointer;
  animation: showMb .7s;
}
.selectedMk{
  background-color: rgb(236,219,186);
  width: 902px;
  height: 410px;
  margin-bottom: 7px;
}
.fiestItem{
  color: black;
  width: 70px;
  height: 30px;
  /* background-color: aqua; */
  margin: -10px 0 0 20px;
  cursor: pointer;
  font-size: 14px;
}
.elseItem{
  color: rgb(99, 102, 100);
  margin: -10px 0 13px 0;
  float: left;
  cursor: pointer;
  font-size: 13px;
}
.elseItem:hover{
  color: rgb(124, 178, 155);
  cursor: pointer;
}
.labelTitle{
  text-align: center;
  color: rgb(236,219,186);
}
#infobox1{
  height: 140px;
  overflow: hidden;
}
#infobox2{
  width: 826px;
  height:140px;
  background-color: rgb(53,104,82);
  margin-left: 10px;
}
.jingxuan:hover{
  opacity: .8;
}
#fenqu{
  margin: 50px 0 0 0;
}
</style>